<template>
  <button @click="active = 'home'">home</button>
  <button @click="active = 'movie'">movie</button>
  <button @click="active = 'about'">about</button>
  <hr />

  <component :is="active" />
</template>

<script setup>
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

import { ref } from 'vue'

defineOptions({
  components: {
    // 注册的组件名称: 导入的组件实例
    home: Home,
    movie: Movie,
    about: About
  }
})

const active = ref('home')
</script>

<style scoped></style>
